<template>
  <div class="reserve" v-loading="loading">
    <!-- 标题 -->
    <div class="title-box">
      <h3>{{ $t("reserve.title") }}</h3>
      <!-- <hr class="text-cyan" />
      <div class="fl-row">
        <div class="text-left">
          <h4>{{ $t('reserve.mondayToSunday') }}</h4>
          <div class="text-left-money">{{ custom.symbol + pushMoney }}</div>
        </div>
      </div> -->
      <!-- <div class="tips">*{{ $t('reserve.afterWeekend') }}</div> -->
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- 步骤条 -->
      <div class="steps">
        <div class="step">
          <div class="line" style="background: transparent"></div>
          <div class="title">
            <template v-if="activeStep < 1">
              <el-icon>
                <CircleCheckFilled />
              </el-icon>
            </template>
            <template v-else>
              <el-icon>
                <CircleCheck />
              </el-icon>
            </template>
            <span>
              {{ $t("reserve.selectRoom") }}
            </span>
          </div>
          <div class="line"></div>
        </div>
        <div class="step">
          <div class="line"></div>
          <div class="title">
            <template v-if="activeStep < 2">
              <el-icon>
                <CircleCheckFilled />
              </el-icon>
            </template>
            <template v-else>
              <el-icon>
                <CircleCheck />
              </el-icon>
            </template>
            <span>
              {{ $t("reserve.dateTime") }}
            </span>
          </div>
          <div class="line"></div>
        </div>
        <div class="step">
          <div class="line"></div>
          <div class="title">
            <template v-if="activeStep < 3">
              <el-icon>
                <CircleCheckFilled />
              </el-icon>
            </template>
            <template v-else>
              <el-icon>
                <CircleCheck />
              </el-icon>
            </template>
            <span>
              {{ $t("reserve.playersInfo") }}
            </span>
          </div>
          <div class="line"></div>
        </div>
        <div class="step">
          <div class="line"></div>
          <div class="title">
            <template v-if="activeStep < 4">
              <el-icon>
                <CircleCheckFilled />
              </el-icon>
            </template>
            <template v-else>
              <el-icon>
                <CircleCheck />
              </el-icon>
            </template>
            <span> {{ $t("reserve.bookEnd") }}</span>
          </div>
          <div class="line" style="background: transparent"></div>
        </div>
      </div>
      <step1
        v-show="activeStep === 0"
        @next="commitStep1"
      ></step1>
      <step2
        v-show="activeStep === 1"
        @next="commitStep2"
        @prevent="activeStep = 0"
        :goodsId="goodsId"
        ref="step2Ref"
      ></step2>
      <step3
        v-show="activeStep === 2"
        @prevent="activeStep = 1"
        @next="commitStep3"
        :goodsGame="goodsGame"
      ></step3>
      <step4
        v-show="activeStep === 3"
        :activeStep="activeStep"
        :step="3"
        :date="form.book_info.date"
        @next="commitStep4"
        @prevent="activeStep = 2"
      ></step4>
    </div>
    <el-dialog
      v-model="centerDialogVisible"
      :title="$t('reserve.orderInfo')"
      width="95%"
      center
    >
      <div class="dialog-content" v-loading.fullscreen.lock="loading">
        <div class="playlist">
          <div class="list-item" v-for="(item, i) in goodsInfo" :key="i">
            <div class="line">
              <img :src="item.goods_img" alt="" v-if="item.goods_img" />
              <div class="title ellipsis">{{ item.goods_name }}</div>
              <div class="num-money">
                <div class="money">
                  <span> {{ $t("reserve.prePlayer") }}</span>
                  <span class="dan">{{
                    custom.symbol + formatMoney(item.goods_price)
                  }}</span>
                </div>
              </div>
              <span class="goods-num">x{{ item.goods_num }}</span>
            </div>
          </div>
        </div>
        <div v-if="orderInfo">
          <div class="date">
            {{ $t("reserve.date") }}：{{ dateText }}
          </div>
          <div class="money2 money" v-if="orderInfo.deposit_price">
            {{ $t("reserve.downPayment") }} <span>{{ custom.symbol }}</span
            ><span class="ft-21">{{ formatMoney(orderInfo.deposit_price.toFixed(2)) }}</span>
          </div>
          <div class="money2 money" style="display: flex">
            {{ $t("reserve.discountAmount") }}
            <div class="coupon-wrap">
              <div v-for="(item, i) in orderInfo.coupon_list" :key="i">
                {{ item.coupon_name }}-
                <span>{{ custom.symbol }}</span>
                <span class="ft-21">-{{ formatMoney(item.virtual_price.toFixed(2)) }}</span>
              </div>
            </div>
          </div>
          <div class="money2 money">
            {{ $t("reserve.subtotal") }}
            <span>{{ custom.symbol }} </span
            ><span class="ft-21"> {{ formatMoney(orderInfo.reality_money.toFixed(2)) }}</span>
          </div>
          <div class="money money-border">
            {{ $t("reserve.actualPayment") }} <span>{{ custom.symbol }}</span
            ><span class="ft-20">{{ formatMoney(orderInfo.reality_money.toFixed(2)) }}</span>
          </div>
        </div>
        <p class="copywriting" v-if="orderInfo && orderInfo.deposit_price">
          {{
            lang === "sa"
              ? `لتأكيد الحجز، يجب عليك دفع ${formatMoney(orderInfo.deposit_price.toFixed(2))(
                  2
                )} ريال سعودي. *`
              : `* To confirm the booking you have to pay ${
                    formatMoney(orderInfo.deposit_price.toFixed(2)) + " " + custom.symbol
                }`
          }}
        </p>
      </div>
      <template #footer>
        <div class="dialog-footer" dir="ltr">
          <div class="but" @click="centerDialogVisible = false">
            {{ $t("reserve.cancel") }}
          </div>
          <div class="but" type="primary" @click="submit">
            {{ $t("reserve.confirm") }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watchEffect } from "vue";
import { ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { confirmBook, readyOrder } from "./reserve.service";
import step1 from "./widget/step1.vue";
import step2 from "./widget/step2.vue";
import step3 from "./widget/step3.vue";
import step4 from "../reserveMobile/widget/step2.vue";
import { dateTransverter,formatMoney } from "@/utils/commen"

const dateText = ref('')
const goodsGame = ref()
const orderInfo = ref();
const goodsInfo = ref();
const admissionTicketPrice = ref(0);
const centerDialogVisible = ref(false); // 订单详情弹出
const custom = JSON.parse(localStorage.getItem("custom") as any);
const router = useRouter();
const step1Ref = ref();
const activeStep = ref(0);
const lang = ref();
lang.value = localStorage.getItem("lang");
const goodsId = ref(NaN)
const form = ref({
  book_info: {
    date: "",
    time: [""],
  },
  good_info: {
    goods_id: "",
    goods_num: "",
  },
  user_info: {
    first_name: "",
    last_name: "",
    country_code: "",
    email: "",
    phone: "",
  },
  pay_type: "",
});
const loading = ref(false);
const goodPrice = ref("");
const pushMoney = ref("");
const step2Ref = ref();
// watchEffect(() => {
//   pushMoney.value = step1Ref.value?.pushMoney;
// });
//平滑滚动顶部
const scrollIntoView = () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
};
const commitStep1 = (val:number) => {
  console.log(val,"val,,,,,");
  
  activeStep.value = 1;
  goodsId.value = val.goods_id
  goodsGame.value = val
  scrollIntoView();
  step2Ref.value.getData()
}

const commitStep3 = (val) => {
  form.value.good_info = val
  activeStep.value = 3;
  scrollIntoView();
}

const commitStep2 = (val) => {
  activeStep.value = 2;
  form.value.book_info = val
  console.log(form.value.book_info,"form.value.book_info");
  scrollIntoView();
};

const commitStep4 = async (val: any) => {
  loading.value = true;

  form.value = {
    ...form.value,
    user_info: {
      first_name: val.firstname,
      last_name: val.lastname,
      email: val.email,
      phone: val.cellphone,
      // country_code: val.country_code
    },
    couponCode: val.couponCode,
    pay_type: val.pay_type,
    reservation_mode:JSON.parse(localStorage.getItem('custom')).reservation_mode
  };
  console.log(form.value,"valueform");
  
  const res = await readyOrder(form.value);
  if (res.status === 0) {
    goodsInfo.value = res.data.goods_list.map((item) => {
      item.num = 1;
      admissionTicketPrice.value += item.num * item.goods_price;
      return item;
    });
    orderInfo.value = res.data;
    dateText.value =  dateTransverter(orderInfo.value.book_info.date,orderInfo.value.book_info.time)
    centerDialogVisible.value = true;
  } else {
    ElMessageBox.alert(res.msg, {
      confirmButtonText: "OK",
      type: "warning",
      center: true,
      callback: (action: Action) => {},
    });
  }
  console.log(res, "res+++");
  loading.value = false;
  // submit(form.value)
};

const submit = () => {
  loading.value = true;
  confirmBook(form.value)
    .then((res) => {
      if (res.status == 0) {
        if (res.data.pay_type === "sumup") {
          router.push({
            path: "/sumup-pay",
            query: { pay_on: res.data.pay_data.pay_on },
          });
        } else if (['tap_payment','paypal','stripe','midtrans'].includes(res.data.pay_type)) {
          const url = res.data.pay_data.pay_url;
          window.location.href = url;
        } else if (res.data.pay_type === "cash") {
          router.push({
            path: "/pay-result",
            query: { order_sn: res.data.order_sn },
          });
        }
      } else {
        ElMessageBox.alert(res.msg, {
          confirmButtonText: "OK",
          type: "warning",
          center: true,
          callback: (action: Action) => {},
        });
      }
    })
    .finally(() => {
      loading.value = false;
    });
  console.log("val", form.value);
};
</script>

<style scoped lang="scss">
.reserve {
  background-color: rgb(226 232 253);
  font-size: 14pt;
  color: rgb(0 0 20);
  padding-bottom: 10rem;

  .fl-row {
    display: grid;
    grid-auto-flow: column;
    text-align: center;
  }

  .title-box {
    padding: 5rem 0 2.5rem;
    text-align: center;
    max-width: 42rem;
    margin: auto;

    h3 {
      margin-bottom: 2rem;
      color: rgb(0 0 20);
      font-weight: 600;
      font-size: 18pt;
    }

    .text-cyan {
      background-color: var(--theme-color);
      height: 2px;
      width: 100%;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
    }

    .text-left {
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
    }

    .text-right {
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      border-left: 2px solid var(--theme-color);
    }

    .text-left-money {
      font-size: 20pt;
      font-weight: 600;
      line-height: 1.375;
    }

    .tips {
      font-style: italic;
      font-size: 10pt;
      text-align: center;
      margin-top: 1rem;
    }
  }

  .content {
    max-width: 80rem;
    margin: auto;
    text-align: center;

    .steps {
      display: flex;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto 50px;
      padding: 0 15px;

      .step {
        position: relative;
        display: flex;
        align-items: center;
        width: 33.3%;
        text-wrap: nowrap;
        .title {
          display: flex;
          align-items: center;
          font-size: 12px;
          margin: 0 5px 0 10px;

          .el-icon {
            margin-right: 10px;
            font-size: 18px;
            color: var(--theme-color);
          }
          span {
            display: block;
            overflow-wrap: break-word;
            white-space: normal; 
            width:80px;
            position: absolute;
            top: 35px;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .line {
          width: 50%;
          height: 2px;
          background-color: var(--theme-color);
        }
      }
    }
  }
  .money {
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;

    span {
      color: var(--theme-color);
    }

    .ft-20 {
      font-size: 24px;
    }
    .ft-21 {
      font-size: 16px;
    }
  }

  .money-border {
    padding-top: 10px;
    border-top: 1px solid var(--theme-color);
  }
  .money2 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
    :nth-child(1) {
      margin-left: 5px;
    }
  }

  .playlist {
    margin-bottom: 20px;
    margin-top: 10px;
    .list-item {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--theme-color);
      .line {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          margin-right: 8px;
          height: 40px;
        }
        .title {
          width: 110px;
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 0;
          color: #0e2e57;
        }
        .num-money {
          margin-left: auto;
          margin-top: 0;
          padding: 0;
          border: none;
          color: #0e2e57;
          .money {
            display: flex;
            flex-direction: column;
            margin-right: 10px;
            color: #0e2e57;
            font-size: 12px;
            :nth-child(1) {
              color: #0e2e57;
            }
          }
        }
        span {
          margin-left: 20px;
        }
        .goods-num {
          font-size: 12px;
          color: #0e2e57;
        }
        .el-icon {
          margin-right: 15px;
          cursor: pointer;
          color: rgb(64, 118, 192);
        }
      }
      .detail {
        margin-top: 10px;
      }
    }
  }
  .ellipsis {
    white-space: nowrap; /* 保证文本在一行内显示 */
    overflow: hidden; /* 超出容器部分隐藏 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
  }
  .coupon-wrap {
    margin-left: 5px;
  }

  .money {
    color: #0e2e57;
  }

  .date {
    color: #0e2e57;
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
  }
  .but {
    color: #e2e8fc;
    background: var(--theme-color-btn);
    font-size: 14px;
    width: 30%;
    text-align: center;
    cursor: pointer;
    height: 42px;
    line-height: 42px;
    font-weight: 600;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    :nth-child(1) {
      margin-right: 20px;
    }
  }

  .dialog-content {
    border: 1px solid var(--theme-color);
    border-radius: 3px;
    padding: 20px;
  }

  .copywriting {
    text-align: center;
    color: #0e2e57;
    margin-top: 10px;
  }
}
:deep(.el-dialog__body) {
  padding: 10px;
}
</style>